// In App.js in a new project

import * as React from 'react';
import { View, Text,Image } from 'react-native';
import { NavigationContainer,createNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home111!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export const navigationRef = createNavigationContainerRef(); // 传递导航属性ref
export function navigate(name: never, params: never) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

function renderTabImage(props: any){
  return <Image style={{ width:27, height:27,marginTop:3 }} source={ props.source} ></Image>
}

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <Tab.Navigator
        screenOptions={({route}) => ({
          headerShadowVisible: false, // android 导航去阴影 默认true开启状态
          headerTitleAlign: 'center', // 标题居中 默认 'left'
          tabBarIcon: ({focused, color, size}) => {
            console.log('color: ', color);
            if (route.name === 'Home') {
              return renderTabImage({
                source:
                  color == '#c3c5c8'
                    ? require('./src/images/icon/task.png')
                    : require('./src/images/icon/task_select.png'),
              });
            } else if (route.name === 'Settings') {
              return renderTabImage({
                source:
                  color == '#c3c5c8'
                    ? require('./src/images/icon/me.png')
                    : require('./src/images/icon/me_select.png'),
              });
            }
          },
          tabBarActiveTintColor: '#4F94F9',
          tabBarInactiveTintColor: '#c3c5c8',
        })}>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{tabBarLabel: '主页'}}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{tabBarLabel: '我的'}}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;